﻿@import "color";
@import "rangeInput";
@import "transition";

@slidePanelContentPadding: 10px;

.volumeArea {
    // This fixes the fact that there's a small gap between the 48px button click target
    // and the slidePanel. If the user's mouse goes over that area then the slidePanel collapses.
    padding: 4px 0;
}

.volumeArea:hover,
.volumeArea:active {
    @expandedPanelHeight: 100px;
    @transitionDelay: .2s;

    .volumeArea-slidePanel {
        height: @expandedPanelHeight;
        pointer-events: all;
        opacity: 1;
        transition-delay: @transitionDelay;
    }

    .rangeInput {
        @volumeRangeSize: (@expandedPanelHeight - (@slidePanelContentPadding * 2));
        right: -@volumeRangeSize;
        width: @volumeRangeSize;
        opacity: 1;
        transition-delay: @transitionDelay;
    }
}

// Chrome bug forces this to be awkward: https://code.google.com/p/chromium/issues/detail?id=341071
.volumeArea-slidePanel {
    @panelWidth: 40px;
    z-index: 1;
    width: @panelWidth;
    height: 0;
    margin-right: 4px;
    margin-left: 4px;
    // Prevent hover events from firing on children when it isn't visible.
    pointer-events: none;
    opacity: 0;
    align-items: center;
    transition: opacity @transition-duration--slow @transition-easeOutSine,
                height  @transition-duration--slow @transition-easeOutSine;

    // CSS triangle
    &:before {
        position: absolute;
        top: (-1 * (@panelWidth / 8));
        right: 0;
        left: 0;
        width: (@panelWidth / 4);
        height: (@panelWidth / 4);
        margin: 0 auto;
        background-color: white;
        content: ' ';
        transform: rotate(45deg);
    }

    .rangeInput {
        // These values need to be explicitly set because element has been rotated so can't rely on width/height: 100%
        right: 0;
        width: 0;
        height: @rangeInputSize;
        opacity: 0;
        transition:
            width @transition-duration--slow @transition-easeOutSine,
            right @transition-duration--slow @transition-easeOutSine,
            opacity @transition-duration--slow @transition-easeOutSine;
    }
}

.volumeArea-slidePanel-content {
    width: 100%;
    height: 100%;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    align-items: center;
    padding: @slidePanelContentPadding 0;
}